<html>

<head>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <style type="text/css">
    td {
      height: 20px;
      width: 20px
    }
    
    button {
      height: auto;
      width: auto
    }
    
    #begin {
      height: auto;
      width: auto
    }
  </style>
  <table border="1">
  </table>
  <p> 结果是：<label id="result"></label>
  </p>
  <button id="begin">开始</button>
  <script type="text/javascript">
window.onload=function(){
var N=10;
var M=10;
var L=M;
var T=N*N-M;
$("#result").text("图中还有"+L+"个雷");
var result = new Array(N);
for (var i = 0; i < N; i++) {
  result[i] = new Array(N);
}
initial();
$("#begin").click(function(){
	$("#result").text("图中还有"+L+"个雷");
	$("table").empty();
  initial();
});
function initial(){
  for(var i=0;i<N;i++){
    for(var j=0;j<N;j++){
      result[i][j]=0;
    }
  }
	L=M;
	T=N*N-M;
  var t=0;
  while(t<M){
  	var tr=Math.floor(Math.random() * N);
    var td=Math.floor(Math.random() * N);
    console.log(tr);
    console.log(td);
    if(result[tr][td]!=-1){
      result[tr][td]=-1;
      t++;
  	}
  }
  for(var i=0;i<N;i++){
    for(var j=0;j<N;j++){
      if(result[i][j]!=-1){
        result[i][j]=getNumber(result,i,j);
      } 	
    }
  }
  for(var i=0;i<N;i++){
    var tr=$("<tr></tr>");
    for(var j=0;j<N;j++){
      $("<td></td>").appendTo(tr);
    }
    $(tr).appendTo("table");
  }
  var isGameOver=false;
	$("table tr").each(function(i){ 
    $(this).children("td").each(function(j){
     	var td=$(this);
      var button = $("<button></button>");
      $(this).append(button);
      $(button).click(function(){
        if(isGameOver){
          return;
        }
      	$(this).hide();
        if(result[i][j]==-1){
        	$(td).text("雷");
          
          $("#result").text("game over");
          isGameOver=true;
        }else{
        	$(td).text(result[i][j]);
          T--;
          if(T==0){
           	$("#result").text("you win");
            isGameOver=true;
          }
        } 
      });
      $(button).mousedown(function(e){
        if(isGameOver){
          return;
        }
        if(3==e.which){
        	if($(this).text()=="mine"){
        		$(this).text("");
       	 	}else{
            $(this).text("雷"); 
            L--;
            $("#result").text("图中还有"+L+"个雷");
          }
        }
      });
    }); 
	});
}
function getNumber(result,x0,y0){
  var num=0;
  var way=[[0,1],[0,-1],[-1,0],[1,0],[1,1],[-1,-1],[-1,1],[1,-1]];
  for(var i=0;i<8;i++){
    var x=x0+way[i][0];
    var y=y0+way[i][1];
    if(x>=0&&x<N&&y>=0&&y<N&&result[x][y]==-1){
      num++;
    }  
  }
  return num;
}};

</script>
</body>

</html>